<template>
	<view class="content-header">
		<view class="header">
			<view class="header-c"></view>
			<view class="header-one flex-row flex-content-between" v-if="address==null">
				<view class="header-one-not1">新建收货地址，让快递到家~</view>
				<view class="flex-row header-one-not1-add flex-item-center">
					<view>添加</view>
					<image src="../../static/index/xy.png" mode="scaleToFill"></image>
				</view>
			</view>
			<view class="header-one flex-row flex-content-between flex-content-center" v-if="address!=null">
				<view class="flex-row">
					<image class="header-has-img" src="../../static/index/dz.png" mode="scaleToFill"></image>
					<view class="flex-column header-has-txt">
						<view>笑笑   吉龙三街266号 </view>
						<view>136****6666</view>
					</view>
				</view>
				<image src="../../static/index/youbian.png" mode="scaleToFill"></image>
			</view>
			<view class="header-goods">
				<view class="header-goods-item">
					<view class="flex-column">
						<view class="header-goods-item-one flex-row flex-content-between" v-for="it in goods">
							<view class="flex-row">
								<image class="header-goods-item-img1" src="../../static/index/sp.png" mode="widthFix"></image>
								<view class="flex-column header-goods-item-txt1">
									<view>鲜活大虾</view>
									<view>500g</view>
									<view>￥60</view>
								</view>
							</view>
							<view class="flex-column-reverse">
								<view class="flex-row header-goods-item-img2">
									<image src="../../static/index/jian1.png" mode="scaleToFill"></image>
									<view>1</view>
									<image src="../../static/index/jia.png" mode="scaleToFill"></image>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="header-goods-t flex-row flex-content-between">
					<view class="header-goods-t-txt1">订单备注</view>
					<view class="flex-row header-goods-t-txt2 flex-item-center">
						<view>无备注</view>
						<image src="../../static/index/youbian.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
			<view class="header-yf flex-column">
				<view class="header-yf-item flex-row flex-content-between">
					<view>商品金额</view>
					<view>￥60</view>
				</view>
				<view class="header-yf-item flex-row flex-content-between">
					<view>运费</view>
					<view>￥6</view>
				</view>
				<view class="jiange"></view>
				<view class="flex-row-reverse">
					<view class="header-yf-txt">总计：￥66</view>
				</view>
			</view>
			<view class="pay">
				<view class="pay-top">
					<view class="pay-top-item flex-row flex-content-between flex-item-center" v-for="item in payList">
						<view class="flex-row pay-top-item1">
							<image src="../../static/index/weixin.png" mode="scaleToFill"></image>
							<view>微信</view>
						</view>
						<image class="pay-top-img1" src="../../static/index/not.png" mode="scaleToFill"></image>
					</view>
				</view>
			</view>
		</view>
		<mu-suspension bottom="0">
			<view class="foot flex-row flex-content-between">
				<view>总计：￥66</view>
				<view>立即支付</view>
			</view>
		</mu-suspension>
	</view>
</template>

<script>
	export default{
		data(){
			return{
				address:{},
				goods:[
					"",
					"",
				],
				payList:[
					"",
					"",
				]
			}
		},
		methods:{
			
		}
	}
</script>

<style lang="scss">
	.foot{
		width: 750rpx;
		height: 164rpx;
		background-color: #FFFFFF;
		z-index: 999999;
		>view:nth-child(1){
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #F64B10;
			line-height: 110rpx;
			margin-left: 30rpx;
		}
		>view:nth-child(2){
			width: 236rpx;
			height: 80rpx;
			background: #FF7336;
			opacity: 1;
			border-radius: 40rpx;
			text-align: center;
			color: #FFFFFF;
			line-height: 80rpx;
			margin-top: 16rpx;
			margin-right: 30rpx;
		}
	}
	.pay-top-item{
		height: 76rpx;
	}
	.pay-top-img1{
		width: 32rpx;
		height: 32rpx;
		margin-right: 20rpx;
	}
	.pay-top-item1{
		margin-left: 20rpx;
		margin-right: 20rpx;
		>image:nth-child(1){
			width: 46rpx;
			height: 46rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 20rpx;
		}
	}
	.pay{
		width: 100%;
		// height: 192rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}
	.header-yf-txt{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color:$default-button-color;
		line-height: 94rpx;
		margin-right: 20rpx;
	}
	.jiange{
		width: 650rpx;
		height: 0rpx;
		border: 2rpx solid #F4F4F4;
		margin-left: 20rpx;
		margin-top: 15rpx;
	}
	.header-yf-item{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		margin-top: 20rpx;
		margin-bottom: 10rpx;
		margin-left: 24rpx;
		margin-right: 20rpx;
	}
	.header-yf{
		width: 690rpx;
		height: 254rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}
	.header-goods-t{
		width: 100%;
		height: 94rpx;
		// height: 30rpx;
	}
	.header-goods-t-txt1{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: 400;
		color: #333333;
		line-height: 94rpx;
		margin-left: 20rpx;
	}
	.header-goods-t-txt2{
		line-height: 94rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #999999;
		}
		>image:nth-child(2){
			width: 12rpx;
			height: 22rpx;
			margin-right: 20rpx;
			margin-left: 10rpx;
		}
	}
	.header-goods-item-img2{
		>image:nth-child(1){
			width: 34rpx;
			height: 34rpx;
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 22rpx;
		}
		>image:nth-child(3){
			width: 34rpx;
			height: 34rpx;
			margin-left: 22rpx;
		}
	}
	.header-goods-item-txt1{
		margin-left: 20rpx;
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
		}
		>view:nth-child(2){
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-top: 4rpx;
		}
		>view:nth-child(3){
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-top: 4rpx;
		}
	}
	.header-goods-item-img1{
		width: 144rpx;
	}
	.header-goods-item-one{
		margin-top: 20rpx;
		margin-bottom: 10rpx;
	}
	.header-goods-item{
		width: 650rpx;
		// height: 192rpx;
		border-bottom: 2rpx solid #F4F4F4;
		margin-left: 20rpx;
		// margin-bottom: 30rpx;
		padding-bottom: 30rpx;
	}
	.header-goods{
		width: 100%;
		// height: 286rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
	}
	.header-has-txt{
		>view:nth-child(1){
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin-left: 16rpx;
			margin-top: 20rpx;
		}
		>view:nth-child(2){
			font-size: 28rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: #333333;
			margin-left: 16rpx;
		}
	}
	.header-has-img{
		width: 52rpx;
		height: 52rpx;
		margin-left: 20rpx;
		margin-top: 36rpx;
	}
	.header-one-has{
		height: 124rpx;
		>image{
			width: 13rpx;
			height: 22rpx;
			margin-right: 20rpx;
		}
	}
	.header-one-not1-add{
		margin-right: 20rpx;
		>view:nth-child(1){
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: 400;
			color: $default-button-color;
		}
		>image:nth-child(2){
			width: 13rpx;
			height: 22rpx;
			margin-left: 10rpx;
		}
	}
	.header-one-not1{
		font-size: 28rpx;
		font-family: PingFang SC;
		font-weight: bold;
		color: #333333;
		margin-left: 20rpx;
		line-height: 124rpx;
	}
	.header{
		width: 690rpx;
		margin-left: 30rpx;
		margin-right: 30rpx;
	}
	.header-c{
		width: 100%;
		height: 20rpx;
	}
	.header-one{
		width: 100%;
		height: 124rpx;
		background-color: #FFFFFF;
		>image{
			width: 13rpx;
			height: 22rpx;
			margin-right: 20rpx;
			margin-top: 50rpx;
		}
	}
</style>